<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../css/animate.css" />
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }
      #border {
        width: 600px;
        height: 300px;
        border: 1px solid blue;
        background-color: #ccc;
        position: absolute;
      }
    </style>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model="newpig.id" v-setcolor/> 品牌名称:<input
          type="text"
          v-model="newpig.name"
        />
        <input type="button" value="添加" @click="add" />
      </div>
      <div class="add">
        品牌名称:
        <input
          type="text"
          placeholder="请输入搜索条件"
          v-model="screen.search"
          ref="tp"
        />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(value,index) in getruselt" :key="index" v-setcolor>
              <td>{{ value.id }}</td>
              <td>{{ value.name }}</td>
              <td>{{ value.time | formatTime }}</td>
              <td>
                <a href="www.baidu.com" @click.prevent="isshow = !isshow">删除</a>
              </td>
              <!-- <td> -->
                    <transition
                    enter-active-class="animated rotateIn"
                    leave-active-class="animated rotateOut">
                      <td id="border" v-show="isshow">
                        <h3>是否确定删除</h3>
                        <a href="#" @click.prevent="isshow = !isshow">取消</a>
                        <a href="#" @click.prevent="del(index),isshow = !isshow">确定</a>
                      </td>
                    </transition>
              <!-- </td> -->
            </tr>
            <tr>
              <td colspan="4" v-show="getruselt.length == 0">
                已经没有任何数据了
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
  <script>
    //   自定义属性过滤器
    Vue.filter('formatTime',(time)=>{
        time = new Date(time)
        time = new Date(time)
        var year = time.getFullYear()
        var month = time.getMonth() + 1
        var day = time.getDate()
        var hour = time.getHours()
        var minute = time.getMinutes()
        var second = time.getSeconds()
        return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
    })
    // 使用自定义指令为元素添加样式
    Vue.directive('setcolor',{
        inserted(el){
            el.style.color='red';
        }
    });
    let vm = new Vue({
      el: "#app",
      // 使用计算属性完成数据的筛选
      computed: {
        getruselt() {
          // 第一种方法进行筛选
          // let temp = []
          // for(var i=0;i<this.pig.length;i++){
          //     if(this.pig[i].name.indexOf(this.screen.search) != -1){
          //         temp.push(this.pig[i])
          //     }
          // }
          // return temp
          // 第二种方法实现筛选
          return this.pig.filter(value => {
            return value.name.indexOf(this.screen.search) != -1;
          });
        }
      },
      // 使用$refs实现文本框的自动聚焦
      mounted() {
        this.$refs.tp.focus();
      },
      data: {
        isshow: false,
        screen: {
          search: ""
        },
        newpig: {
          id: "",
          name: "",
          time: new Date()
        },
        pig: [
          {
            id: "1",
            name: "喜洋洋",
            time: new Date()
          },
          {
            id: "2",
            name: "懒洋洋",
            time: new Date()
          },
          {
            id: "3",
            name: "灰太狼",
            time: new Date()
          },
          {
            id: "4",
            name: "红孩儿",
            time: new Date()
          },
          {
            id: "5",
            name: "雅蠛蝶",
            time: new Date()
          }
        ]
      },
      methods: {
        // 新增事件
        add() {
          this.pig.push({ ...this.newpig });
        },
        // 删除事件
        del(index) {
          this.pig.splice(index, 1);
        }
      }
    });
  </script>
</html>
